<script setup lang="ts">
//  面包屑
import BreadCrumbs from '@/components/BreadCrumbs.vue'
</script>
<template>
  <!-- 面包屑 -->
  <BreadCrumbs style="margin-left: 108px; margin-top: 20px;" parent-name="评价晒单" parent-path="/"></BreadCrumbs>
  <!-- li标签flex未解决 -->
  <div class="sun-detail">
    <div class="sun-left">
      <div class="left-top">
          <img src="../../images/order-tea.png" alt="">
          <p class="data-sty">红米Note 5A 高配版</p>
          <p class="data-price">¥1899</p>
          <p class="data-say">9978人评价</p>
          <a href="javascript:;">发布评价</a>
      </div>
      <div class="left-bottom">
        <p class="bottom-num">订单编号 : <span class="num-one">62205697599</span></p>
        <p class="bottom-num">下单时间 : <span class="num-one">2020-05-16 15:06:20</span></p>
      </div>
    </div>
    <div class="sun-right">
      <div class="right-score">商品评分:
         <!--icon-24gf-heart 加入这个类名背景色为橙色 -->
        <i class="i-coral iconfont icon-24gf-heart"></i>
        <i class="iconfont icon-xiangqu"></i>
        <i class="iconfont icon-xiangqu"></i>
        <i class="iconfont icon-xiangqu"></i>
        <i class="iconfont icon-xiangqu"></i>
        <span class="score-bad">一般</span>
      </div>
      <dl class="right-bug">
        <dt class="bug-dt">印象标签: </dt>
        <dd class="bug-dd">
          <ul>
            <li class="bug-active">穿着舒服</li>
            <li>漂亮精致</li>
            <li>简单大气</li>
            <li>尺寸合适</li>
            <li>性价比高</li>
            <li>值得拥有</li>
            <li>快递给力</li>
            <li>材质给力</li>
            <li>自定义</li>
          </ul>
        </dd>
        <input class="bug-inp" type="text" placeholder="请输入标签">
      </dl>
      <div class="write-text">填写评价:
        <textarea id="text-area" placeholder="宝贝是否满足了你的期待?说说你的使用心得分享给其它想购买得朋友吧" maxlength="500" style="resize: none;width: 687px; height: 188px;"></textarea>
        <div class="text-one">还可输入<span>500</span>字</div>
      </div>
      <div class="write-img">评价晒单:
        <div class="img-add"></div>
        <div class="add-one">共<span class="add-two">2</span>张,还能上传<span class="add-two">7</span>张</div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url(../Member/Order/font/iconfont.css);
.sun-detail {
  width: 1240px;
  height: 1020px;
  background-color: #fff;
  margin: 20px auto;
  .sun-left {
    float: left;
    width: 354px;
    height: 1020px;
    border-right: 1px solid #f5f5f5;
    .left-top {
      margin: 5px auto;
      width: 216px;
      height: 336px;
      background-color: #fff;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      border-bottom: 1px solid #F5F5F5; 
      img {
          width: 148px;
          height: 122px;
        }
        .data-sty {
          font-size: 16px;
          color: #333;
        }
        .data-price {
          color: #CF4444;
          font-size: 18px;
        }
        .data-say {
          color: #999;
          font-size: 14px;
        }
        a {
          display: inline-block;
          background-color: #27ba9b;
          border-radius: 4px;
          width: 100px;
          height: 32px;
          text-align: center;
          line-height: 30px;
          color: #fff;
        }
    }
    .left-bottom {
      margin-left: 78px;
      .bottom-num {
        font-size: 14px;
        color: #999;
        line-height: 20px;
        margin-bottom: 10px;
        .num-one {
          color: #333;
          margin-left: 5px;
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
  .sun-right{
    float: right;
    width: 886px;
    height: 1020px;
    padding-left: 32px;
    .right-score {
      margin-top: 32px;
      margin-bottom: 32px;
      font-size: 14px;
      color: #999;
      i {
        font-size: 14px;
        color: #999;
        margin-left: 8px;
      }
      .i-coral {
        // background-color: #FF9240;
        color: #FF9240;
      }
      .score-bad {
        font-size: 14px;
        color: 14px;
        color: #333;
        margin-left: 8px;
      }
    }
    .right-bug {
      font-size: 14px;
      // display: flex;
      color: #999;
      height: 114px;
        .bug-dt {
          width: 100px;
          height: 82px;
          display: inline-block;
        }
        .bug-dd {
          height: 114px;
          display: inline-block;
          ul {
        display: flex;
          // display: inline-block;
        flex-wrap: wrap;
        li {
          // display: inline-block;
          // white-space: pre-wrap;
          width: 84px;
          height: 24px;
          color: #333;
          border: 1px solid #E4E4E4;
          text-align: center;
          font-size: 14px;
          line-height: 20px;
          margin-left: 8px;
        }
        .bug-active {
          color: #27BB9A;
          border: 1px solid #27BB9A;
        }
      }
        }
    }
  }
}
</style>
